<!DOCTYPE html>
<html lang="zh" class="dark">
<head>
 <meta charset="utf-8"/>
 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
 <meta name="viewport"
       content="width=device-width,maximum-scale=1,minimum-scale=1,initial-scale=1,user-scalable=no"/>
 <meta name="description" content=""/>
 <title>资源广场</title>
 <link href="/css/app.css" rel="stylesheet"/>
 <link rel="stylesheet" type="text/css" href="/css/index.css"/>
</head>
<body>
<div outline="0" hidefocus="true" id="app">
 <div>
  <div class="square-header-container">
   <div class="square-header-logo-container">
    Logo
   </div>
  </div>
  <div class="square-title">
   Mou小可爱的广场
  </div>
  <div class="square-desc">
   即刻获取常用设计资源，设计快人一步
  </div>
  <div class="square-operation">
   <div class="square-operation-container">
    <div class="square-operation-select">
     <div data-v-566ba0f2="" data-v-53b4124c="" class="basic-popover master-select theme_simple"
          slot="header" style="width: 120px;">
      <div data-v-566ba0f2="" tabindex="0" class="trigger" style="display: inline-block;">
       <div data-v-566ba0f2="" class="">
        <div data-v-566ba0f2="" class="simple-drop">
         <div data-v-566ba0f2="" class="simple-title simple-title-small">
          最新发布
         </div>
         <div data-v-566ba0f2="" class="dropdown_icon transition">
          <svg width="1em" height="1em" viewbox="0 0 14 14" fill="none"
               xmlns="http://www.w3.org/2000/svg" data-v-566ba0f2=""
               style="font-size: 14px; transform: rotate(0deg);">
           <path fill-rule="evenodd" clip-rule="evenodd"
                 d="M7.00015 8.38203L4.38089 5.71749C4.26341 5.59799 4.07082 5.59789 3.95322 5.71727L3.70719 5.96704C3.59223 6.08375 3.59215 6.2711 3.70701 6.38791L6.6027 9.33269C6.8222 9.55577 7.1781 9.55577 7.3976 9.33269L10.293 6.38799C10.4079 6.27118 10.4078 6.08383 10.2928 5.96713L10.0468 5.71738C9.92919 5.598 9.73659 5.5981 9.61912 5.71761L7.00015 8.38203Z"
                 fill="currentcolor"></path>
          </svg>
         </div>
        </div>
       </div>
      </div>
      <!---->
     </div>
    </div>
    <div class="square-operation-detail">
     <div class="p4 square-operation-item active">
      全部
     </div>
     <div class="p4 square-operation-item" v-for="(blogcate,index) in blogCategories">
       {{blogcate.categoryTitle}}
     </div>
    </div>
   </div>
   <!---->
   <div id="square-item-container" class="square-item-container">
    <div v-for="(blog,index) in blogList " class="square-item-detail resource-item-hover">
     <div class="square-item-wrapper"
          :style="'background: url('+blog.img+') 0% 0% / 100% 100%;'"></div>
     <div class="square-item-desc p5">
      <span class="square-item-name truncate">{{blog.id}}=={{blog.title}} </span>
      <span class="square-item-count">
         <svg width="1em" height="1em" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"
              style="font-size: inherit; transform: rotate(0deg);">
          <path fill-rule="evenodd" clip-rule="evenodd"
                d="M9.11011 6.00338L9.36465 6.25659C9.48212 6.37344 9.48212 6.56288 9.36465 6.67973L7.42392 8.61025C7.18898 8.84394 6.80808 8.84394 6.57315 8.61025L4.63239 6.6797C4.51492 6.56286 4.51492 6.37341 4.63239 6.25656L4.88699 6.0033C5.00446 5.88645 5.19491 5.88645 5.31237 6.0033L6.51772 7.2023L6.51728 2.30172C6.51726 2.13647 6.65191 2.0025 6.81803 2.00248L7.17806 2.00244C7.34418 2.00242 7.47887 2.13637 7.47888 2.30162L7.47933 7.20242L8.68472 6.00338C8.80219 5.88654 8.99264 5.88654 9.11011 6.00338ZM10.9983 10.9973H3.00195V8.29989C3.00195 8.13421 2.86764 7.99989 2.70195 7.99989H2.30195C2.13627 7.99989 2.00195 8.13421 2.00195 8.29989V11.3973C2.00195 11.7287 2.27058 11.9973 2.60195 11.9973H11.3983C11.7297 11.9973 11.9983 11.7287 11.9983 11.3973V8.29989C11.9983 8.13421 11.864 7.99989 11.6983 7.99989H11.2983C11.1326 7.99989 10.9983 8.13421 10.9983 8.29989V10.9973Z"
                fill="currentcolor"></path>
         </svg><span> 1215 </span></span>
     </div>
    </div>
   </div>
  </div>
  <div class="square-loading">
   <div style="color: #fff;">总共有：{{total}}条记录，总{{pages}}页,当前是：{{pageNo}}，每页显示：{{pageSize}}</div>
   <button @click="prevPage" style="color: #fff;">上一页</button>
   <button @click="nextPage" style="color: #fff;">下一页</button>
   <div>
    - 到底部了 -
   </div>
  </div>
 </div>
</div>

<script src="/js/vue.min.js"></script>
<script src="/js/axios.min.js"></script>
<script>
 var vue = new Vue({
  el: "#app",
  data: {
   blogCategories: [],
   //  关于博客内容的返回和分页信息
   blogList:[],
   pageNo:1,
   total:0,
   pages:0,
   pageSize:8
  },
  created: function () {
   // 用ajax异步执行获取博客分类内容
   this.loadCategory();
   // 用ajax异步执行获取博客内容
   this.loadBlogContent();
  },
  methods: {

   // 分类查询
   loadCategory: function () {
     var that = this;
     axios.get("/api/blogcategory/load").then(function (res) {
        that.blogCategories = res.data;
     });
   },

   // 点击下一页
   nextPage:function(){
     if(this.pageNo == this.pages){
       alert("没有更多了...")
       return;
     }
     this.pageNo++;
     this.loadBlogContent();
   },

   // 点击上一页
   prevPage:function(){
    if(this.pageNo<=1){
     alert("没有更多了...")
     return;
    }
    this.pageNo--;
    this.loadBlogContent();
   },

   // 查询博客内容
   loadBlogContent:function(){
      var that = this;
      // 1:获取 vue中分页信息 ,为什么定义vue的data，方便你后续去控制和下一页
      var pageNo = that.pageNo;//1
      var pageSize = this.pageSize;//10
      axios.get("/api/blog/load?pageNo="+pageNo+"&pageSize="+pageSize).then(function (res) {
       // 1: 获取后台返回的分页对象数据
        var blogPage = res.data;
        // 2：把分页数据中的数据获取到赋值给vue中data的blogList数据域中
        that.blogList = blogPage.records;
        that.total = blogPage.total;
        that.pages = blogPage.pages;
      });
   }

  }
 })
</script>
</body>
</html>